<template>
  <div class="content">
    <div class="midcontent">
      <div class="lastcontent">

        <div class="merchant">
          <div class="merchant-btn">
            <router-link to="/AddMerchant">
              <a href="" target="_blank">商家入住</a>
            </router-link>

          </div>
        </div>

        <div class="product">

          <router-link tag="li"
                       class="productlist"
                       v-for="(i,index) in commaditList"
                       :key="index"
                       :to="`/shoppingmall/ProductDetail/${i.figureId}/${i.figureName}/${i.figurePrice}`">
                  <div class="productaImg">
                    <a><img :src="i.figureImg" style="height: 285px ;width: 285px"></a>
                  </div>

                <div class="productName">
                  <h1>{{i.figureName}}</h1>
                  <a><h1>￥{{i.figurePrice}}</h1></a>
                </div>

          </router-link>
        </div>
      </div>
    </div>

  </div>
    
</template>


<script>
//导入ajax请求库
  import axios from 'axios';

    export default {
        name: "Commadit",
      data() {
        return {
          commaditList:[]
        }
      },

      mounted() {
          /*商场手办
          * 后端:吴玉涛
          * */
        axios.get('/api/CommaditList.json')
          .then((response) => {

            console.log(response.data);
            const data = response.data;

            this.commaditList = data;

          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
</script>


<style  scoped>
.content{
  min-width: 1200px;
  height: auto;
  background-color: #fff;
}
  .midcontent{
    top: 0px;
    width: 1200px;
    margin: 0 auto;
    height: 1250px;

  }
    .lastcontent{
      overflow: hidden;
      width: 1200px;
      height: 1250px;

    }
    .merchant{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
      margin: 30px;
    }
      .merchant .merchant-btn {
        border: 1px solid #f03d37;
        padding: 10px 15px;
        font-size: 15px;
        color: #f03d37;
        border-radius: 22.5px;
      }
        .merchant .merchant-btn a:visited {
        color: #f03d37;
        }
        a{
        text-decoration: none;
        }

    .product {
      width: 1200px;
      height: auto;
      text-align: center;
    }
      .productlist {
        display: inline-block;
        width: 380px;
        height: 353px;
        margin: 0px 10px;
      }
        .productaImg{
          width: 285px;
          height: 285px;
          margin-left: 50px ;
        }
        .productName{
          font-size: 18px;
          color: #333;
          margin-top: 10px;
        }
        a{
          color: #f03d37;
          margin-right: 6px;
          font-weight: bolder;
        }

</style>
